<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
    <div id="app"></div>
<script>
window.onload = function () { 
    // --------------------------------------------------
    // --------------------------------------------------
    // -------------author:zhoumingle---------------------
    // -------------动态队列式加载文件 专题-------------------
    // -------------动态队列式加载文件 专题-------------------
    // -------------动态队列式加载文件 专题--------------------
    // -------------动态队列式加载文件 专题--------------------
    // --------------------------------------------------
    // --------------------------------------------------


    // promis队列记载机制
    class LoadFile {
        constructor(arr) {
            this.scriptArr = arr || [];
            this.scriptTemp = [];
            this.cssTemp = [];
        };
        render() {
            this.queue();
        };
        queue() {
            if (this.scriptArr.length === 0) return;
            let me = this;
            this.scriptArr.reduce(function (pre, next) {
                return pre.then((resolve, reject) => {
                    let type = me.judgeFile(next);
                    return me[type](next);
                });
            }, Promise.resolve());
        };
        addJs(next) {
            let me = this;
            return new Promise((resolve, reject) => {
                let s = document.createElement('script');
                    s.src = next;
                    document.body.appendChild(s);
                    s.onload = function () {
                        me.scriptTemp.push(s);
                        console.log(next, 'success')
                        resolve();
                    };
                    s.onerror = function (err) { 
                        console.log(err, 'fail');
                        reject(err);
                        }
            })
        };
        addCss(next) {
            let me = this;
            return new Promise((resolve, reject) => {
                let l = document.createElement('link');
                l.setAttribute('type','text/css');
                l.setAttribute('rel','stylesheet');
                l.setAttribute('href', next);
                document.head.appendChild(l);
                l.onload = function () {
                    me.cssTemp.push(l);
                    console.log(next, 'success')
                    resolve();
                };
                l.onerror = function (err) { 
                    console.log(err, 'fail');
                    reject(err);
                };
            });
        };
        // 判断文件类型
        judgeFile(fileUrl) {
            let type;
            let rule = {
                Js: /\.js$/,
                Css: /\.css$/
            };
            for (const key in rule) {
                if (Object.hasOwnProperty.call(rule, key)) {
                    const element = rule[key];
                    element.test(fileUrl) && (type = key);
                }
            };
            return 'add' + type;
        };
    }

    // 入口函数
    let  loadFile = (function () { 
        var cahcheInstance = null;
        return function (arr) {
            if (!cahcheInstance) {
                cahcheInstance = new LoadFile(arr);
            };
            return cahcheInstance;
        }
    })();

    let arr = [
        '../js/promise-promote.js',
        '../css/index.css',
    ];

    loadFile(arr).render();
}

</script>
    
</body>
</html>